<template>
  <!-- editor根标签 -->
  <div ref="div"></div>
</template>

<script>
// 引入封装的图片上传接口
import { upLoad } from '@/services/coures'
// 引入富文本编辑器
import E from 'wangeditor'
export default {
  name: 'editor',
  // 参数
  props: ['value'],
  data () {
    return {
      // 信号值，是否已经加载完毕
      loading: false
    }
  },
  // 钩子函数
  mounted () {
    // 调用函数
    this.initEditor()
  },
  methods: {
    // editor初始化函数
    initEditor () {
      // 创建实例，利用ref获得元素
      const editor = new E(this.$refs.div)
      // 将editor设置给this，否则后面监听器使用不了
      this.editor = editor
      // 上传图片配置要写在editor.create()之前
      editor.config.customUploadImg = async (resultFiles, insertImgFn) => {
        // 创建一个空的图片地址
        let imgUrl = ''
        // 创建FormData实例
        const fd = new FormData()
        // 向FormData添加文件信息，resultFiles[0]是上传图片信息列表（如果想多个上传，可以遍历resultFiles）
        fd.append('file', resultFiles[0])
        // 调用接口上传图片，并且带上获取进度的函数
        const { data } = await upLoad(fd, this.onUploadProgress)
        if (data.code === '000000') {
          // 如果上传成功修改url地址
          imgUrl = data.data.name
        }
        // 调用第二个参数实现插入
        insertImgFn(imgUrl)
      }
      editor.create()
      // 设置内容，暂时设置为空
      editor.txt.html('')
      // 设置change事件
      editor.config.onchange = newHtml => {
        // 事件触发后利用v-model把新数据传递回父元素
        this.$emit('input', newHtml)
      }
    }
  },
  watch: {
    // 监听value变化，只有第一次加载的时候触发
    value () {
      if (!this.loading) {
        // 如果没有加载，那么设置默认展示信息
        this.editor.txt.html(this.value)
        // 修改信号值为true，这样以后在更改数据就不会触发
        this.loading = true
      }
    }
  }
}
</script>
